<template>
    <div class="common">
        <h2>选择医疗机构</h2>
        <div class="search">
            <div class="search-element">
                <span class="text">根据名称选择：</span>
                <el-autocomplete v-model="params.institution" value-key="name"
                    :fetch-suggestions="querySearchInstitution" clearable class="inline-input w-50" placeholder="选择医疗机构"
                    @select="handleSelectInstitution" @input="clearInstitution" @keyup.enter="searchInstitutions()" />
            </div>
            <div class="search-element">
                <span class="text">根据科室选择：</span>
                <el-autocomplete v-model="params.department" value-key="name" :fetch-suggestions="querySearchDepartment"
                    clearable class="inline-input w-50" placeholder="选择科室" @select="handleSelectDepartment"
                    @input="clearDepartment" @keyup.enter="searchInstitutions()" />
            </div>
            <div class="search-element">
                <el-button type="primary" @click="searchInstitutions()">搜索</el-button>
            </div>
        </div>
        <div class="institutions">
            <div v-for="item in institutions" class="institution">
                <el-image v-if="item.institution_img" :src="item.institution_img" class="institution-img"
                    @click="clickInstitution(item)"></el-image>
                <el-image v-else src="src\assets\imgs\暂无图片.png" class="institution-img"
                    @click="clickInstitution(item)"></el-image>
                <div class="context">
                    <div class="title">
                        <span v-text="item.name" class="name" @click="clickInstitution(item)"></span>
                        <el-tag v-if="item.level != 10" v-text="levelText(item.level)" effect="dark" type="success"
                            size="small"></el-tag>
                    </div>
                    <div class="info">
                        <!-- 将多于三行的部分显示为... -->
                        <p>简介：<span v-if="item.description" v-text="item.description.length > 200 ? item.description.slice(0, 200) + '...' :
                            item.description"></span>
                            <span v-else>暂无简介</span>
                        </p>
                        <p>地址：<span v-text="item.address"></span></p>
                        <p>电话：<span v-text="item.contact"></span></p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页区域 -->
        <el-pagination v-if="params.total > 0" :current-page="params.currentPage" :page-size="params.pageSize"
            background layout="total, prev, pager, next" :total="params.total" @current-change="handleCurrentChange" />
    </div>
</template>

<script>
import { departmentFindAPI } from '@/api/department';
import { healthInstitutionFindAPI } from '@/api/healthInstitution';

export default {
    data() {
        return {
            params: {
                // 查询参数
                institution_id: '',
                institution: '',
                department_id: '',
                department: '',
                // 分页参数
                total: 0,
                currentPage: 1,
                pageSize: 7
            },
            institutions: [],
            institutionsDropdown: [],
            departmentDropdown: [],
            emptyParams: {}
        }
    },
    methods: {
        loadInstitutions() {
            healthInstitutionFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.institutions = resp.data.datas;
                    this.params.total = resp.data.total;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })

            healthInstitutionFindAPI(this.emptyParams).then((resp) => {
                if (resp.data.code == 2000) {
                    this.institutionsDropdown = resp.data.datas;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })

            departmentFindAPI(this.emptyParams).then((resp) => {
                if (resp.data.code == 2000) {
                    this.departmentDropdown = resp.data.datas;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        searchInstitutions() {
            this.loadInstitutions();
        },
        clickInstitution(item) {
            this.$router.push('/healthInstitution/' + item.id);
        },
        handleCurrentChange(page) {
            this.params.currentPage = page;
            this.loadInstitutions();
        },
        //这是当输入数据时触发的，筛选出和输入数据匹配的建议输入。
        createFilter(queryString) {
            return (item) => {
                return item.name.toLowerCase().includes(queryString.toLowerCase());
            };
        },
        //机构下拉框事件
        //该方法选择列表后触发
        handleSelectInstitution(item) {
            this.params.institution_id = item.id;
        },
        //输入框获取焦点时调用的方法
        querySearchInstitution(queryString, cb) {
            let results = this.institutionsDropdown;
            results = queryString
                ? results.filter(this.createFilter(queryString))
                : results;
            cb(results);
        },
        //点击清除按钮时触发事件
        clearInstitution() {
            this.params.institution_id = '';
        },
        //科室下拉框事件
        //该方法选择列表后触发
        handleSelectDepartment(item) {
            this.params.department_id = item.id;
        },
        //输入框获取焦点时调用的方法
        querySearchDepartment(queryString, cb) {
            let results = this.departmentDropdown;
            results = queryString
                ? results.filter(this.createFilter(queryString))
                : results;
            cb(results);
        },
        //点击清除按钮时触发事件
        clearDepartment() {
            this.params.department_id = '';
        }
    },
    computed: {
        levelText() {
            return (level) => {
                switch (level) {
                    case 0:
                        return '三级特等';
                    case 1:
                        return '三级甲等';
                    case 2:
                        return '三级乙等';
                    case 3:
                        return '三级丙等';
                    case 4:
                        return '二级甲等';
                    case 5:
                        return '二级乙等';
                    case 6:
                        return '二级丙等';
                    case 7:
                        return '一级甲等';
                    case 8:
                        return '一级乙等';
                    case 9:
                        return '一级丙等';
                }
            };
        }
    },
    created() {
        this.loadInstitutions();
    }
}
</script>

<style scoped>
.example-pagination-block {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-pagination {
    margin-top: 20px;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.common {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.common .search {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    width: 100%;
}

.common .search .search-element {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.common .search .search-element .text {
    width: 170px;
    /* flex: 1; */
}

.common .search .search-element .el-autocomplete {
    width: 200px;
    /* flex: 1; */
}

.institutions {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
}

.institutions .institution {
    width: 100%;
    margin: 5px 0;
    display: flex;
}

.institutions .institution .institution-img {
    width: 240px;
    height: 160px;
    cursor: pointer;
}

.institutions .institution .context {
    flex: 1;
    margin-left: 10px;
}

.institutions .institution .context .title {
    display: flex;
    justify-content: start;
    align-items: center;
}

.institutions .institution .context .title .name {
    font-size: 18px;
    margin-right: 10px;
    cursor: pointer;
}

.institutions .institution .context .info {
    font-size: small;
    color: #909399;
}

.institutions .institution .context .info p {
    margin-top: 5px;
}

@media (max-width: 768px) {
    .common .search {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 20px 0;
        width: 100%;
    }

    .common .search .search-element {
        display: flex;
        align-items: center;
        margin-right: 20px;
    }

    .institutions {
        width: 100%;
    }

    .institutions .institution .institution-img {
        width: 54vw;
        height: 36vw;
    }

    .institutions .institution .context .title {
        flex-direction: column;
    }

    .institutions .institution .context .info p:first-child {
        display: none;
    }
}
</style>